﻿@{
    ViewData["Title"] = "用户登录 ";
}
<div class="container login">
    
    <div class="login-title">
        <strong>OSS.Core</strong>
    </div>

    <div class="col-xs-10 col-sm-5 login-body">
        <div class="title">
            <strong>
                登 &nbsp;&nbsp; 录
            </strong>
        </div>
        <form id="login-form" >
            <div class="form-group">
                
                <input type="text" class="form-control" 
                       v-model="login.name" name="name"
                       data-vv-as="手机或邮箱"  v-validate="'required|emailandphone'"
                       placeholder="请输入手机/邮箱" />

                <p class="text-danger" style="display: none" v-show="errors.has('name')">{{ errors.first('name') }}</p>
            </div>
            <div class="form-group">
                
                <div class="input-group">
                
                    <input type="text" class="form-control"
                           v-model="login.passcode" name="passcode"
                           data-vv-as="验证码" v-validate="'required|min:4'"
                           placeholder="请输入验证码"/>
                    <span class="input-group-addon">@@</span>

                </div>
     
                <p class="text-danger" style="display: none" v-show="errors.has('passcode')">{{ errors.first('passcode') }}</p>
            </div>
            <div class="login-btn">
           
                <span>
                    <button type="button" @@click="submit" class="btn  btn-success">登录</button>
                </span>
            </div>
        </form>      
    </div>
    <div class="col-xs-10 col-sm-5 login-footer">
        @Html.Partial("_ThirdPlatform")
    </div>
</div>
@section Scripts
{
    <script src="@ViewBag.CssStaticPath/lib/vue/dist/vue.min.js"></script>
    <script src="@ViewBag.CssStaticPath/lib/vee-validate/dist/vee-validate.min.js"></script>
    <script src="@ViewBag.CssStaticPath/lib/vee-validate/dist/vee-validate-tips.js" asp-append-version="true"></script>
    <script>

        Vue.use(VeeValidate, { events: 'blur' });
        var loginVue = new Vue({
            el: "#login-form",
            data: {
                login: {
                    name: "",
                    passcode: "",
                    type: 20
                }
            },
            methods: {
                submit: function(event) {
                    this.$validator.validateAll().then(result => {

                        var self = this;
                        var data = self.login;
                        var url = "/portal/codelogin";
                        PostApi(event.target,
                            url,
                            data,
                            function(res) {
                                if (isRetOk(res)) {
                                    location.href = res.return_url;
                                } else {
                                    ShowTip_Error(res.msg);
                                }
                            });
                    });
                }
            },
            created() {
                var data = this.login;
                this.$validator.extend("emailandphone",
                    {
                        getMessage(field, params, data) {
                            return "请填写正确的手机号或者邮箱";
                        },
                        validate(value) {
                            if (/^1\d{10}$/.test(value)) {
                                data.type = 20;
                            } else if (/^(\w-*\.*)+@@(\w-?)+(\.\w{2,})+$/.test(value)) {
                                data.type = 30;
                            } else {
                                return false;
                            }
                            return true;
                        }
                    });
            }
        });
    </script>

}
